{% load CustomFuncTags %}
    <div class="Card">
        
        {% if not ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' == 'readonly' %}
        <div class="UserAvatarEditor ProfileHeader-avatar">
            <img title="点击切换头像" id="UserImageChangeShow" target="UserImageChangeInput" class="AvatarUserProfile" src="{{MEDIA_URL}}{{ExportItem_UserInfo.0.0.Avatar}}" onclick="javascript:UploadImg('UserImageChangeInput',this.id)">
        </div>
        <div class="form-group" style="text-align:center;">
            <input id="UserImageChangeInput" class="AvatarUserImageChange" type="file" data-source="" name="pclogo" onchange="javascript:UploadUserImg(this)" accept="image/*">
        </div> 
        {% endif %}
        {% if ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' == 'readonly' %}
        <div class="UserAvatarEditor ProfileHeader-avatar">
            <img id="UserImageChangeView" class="AvatarUserProfile" src="{{MEDIA_URL}}{{ExportItem_UserInfo.0.0.Avatar}}">
        </div>
        {% endif %}
        <div class="ProfileHeader-contentHead">
            <span class="ProfileHeader-name">
                <input id='UserProfileNickName' class="InputUserProfileDetail" style="border-bottom:{{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }}px dotted #ddd;width:450px;" {{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }} type="text" value="{{ExportItem_UserInfo.0.0.Nick}}">
            </span>
            <span>
            {% if ExportItem_UserInfo.0.1|GetDictValue:'VisitorIdentity' == 'Self' %}
                <button class="Button Button--blue BtnUserProfileSaveInfo" onclick="javascript:UserProfileUpdate('/UserProfileUpdate/')">保存</button>
            {% elif ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' == 'readonly' and ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Link' == 'Link' %}
                <button id='LinkButton' class="Button Button--blue BtnUserProfileSaveInfo" onclick="javascript:UserLink('/UserLink/','{{ExportItem_UserInfo.0.0.id}}','add')">关注</button>
            {% elif ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' == 'readonly' and ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Link' == 'Linked' %}
                <button id='LinkButton' class="Button Button--blue BtnUserProfileSaveInfo" onclick="javascript:UserLink('/UserLink/','{{ExportItem_UserInfo.0.0.id}}','delete')">取消关注</button>
            {% endif %} 
            </span>
            <span>
            {% if ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' == 'readonly' and ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Block' == 'Blocked' %} 
                <button id='LinkButton' class="Button Button--red BtnUserProfileSaveInfo" onclick="javascript:BlackListOperation('delete','{{ExportItem_UserInfo.0.0.id}}')">取消屏蔽</button>
            {% elif ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' == 'readonly' and ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Block' == 'Block' %}
                <button id='LinkButton' class="Button Button--red BtnUserProfileSaveInfo" onclick="javascript:BlackListOperation('add','{{ExportItem_UserInfo.0.0.id}}')">屏蔽</button>  
            {% endif %}  
            </span>
            <div>
                <input id='UserProfileDescription' type="text" class="InputUserProfileDetail" style="border-bottom:{{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }}px dotted #ddd;" {{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }} placeholder="简介" value="{{ExportItem_UserInfo.0.0.Description}}">
            </div>
        </div>
        <hr class="ContentPageHr">
        <div class="ProfileHeader-contentBody">
            <div>
                <div class="ProfileHeader-info">
                    <div class="ProfileHeader-infoItem">
                        <div>
                            <label for="">性别 :</label>
                            {% if ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' == 'readonly' %}
                            <select id="UserProfileSexOptions" disabled class="SelectUserProfile">
                            {% else %}
                            <select id="UserProfileSexOptions" class="SelectUserProfile">                            
                            {% endif %}
                                {% if ExportItem_UserInfo.0.0.Sex == '男' %}
                                <option selected="selected">男</option>
                                <option>女</option>
                                <option>未公开</option>
                                {% elif ExportItem_UserInfo.0.0.Sex == '女' %}
                                <option>男</option>
                                <option selected="selected">女</option>
                                <option>未公开</option>
                                {% elif ExportItem_UserInfo.0.0.Sex == '未公开' %}
                                <option>男</option>
                                <option>女</option>
                                <option selected="selected">未公开</option>
                                {% endif %}
                            </select>
                        </div>
                        <div class="DivUserProfileDetail">
                            <label for="">星座 :</label>
                            <input id='UserProfileConstellation' type="text" class="InputUserProfileDetail" style="border-bottom:{{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }}px dotted #ddd;" {{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }} placeholder="星座" value="{{ExportItem_UserInfo.0.0.Constellation}}">
                        </div>
                        <div class="DivUserProfileDetail">
                            <label for="">邮箱 :</label>
                            <input id='UserProfileemail' type="text" class="InputUserProfileDetail" style="border-bottom:{{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }}px dotted #ddd;" {{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }} placeholder="邮箱" value="{{ExportItem_UserInfo.0.0.email}}">
                        </div>
                        <div class="DivUserProfileDetail"> 
                            <label for="">城市 :</label>   
                            <input id='UserProfileRegion' type="text" class="InputUserProfileDetail" style="border-bottom:{{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }}px dotted #ddd;" {{ ExportItem_UserInfo.0.1|GetDictValue:'VisitorOAuth-Read' }} placeholder="城市" value="{{ExportItem_UserInfo.0.0.Region}}">
                        </div>
                        <div class="DivUserProfileDetail"> 
                            <label for="">加入时间 :</label>
                            <input id='UserProfileCheckInDate' type="text" class="InputUserProfileDetail" placeholder="注册时间" readonly="readonly" value="{{ExportItem_UserInfo.0.0.date_joined}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>